<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>精灵图</title>
	<style>
		/*
			对于psd图 抠图的步骤
			1 先转换成移动工具
			2 摁住 command 键 移动工具去单击所要图标
			3 右方图层会显示所要图标所在图层位置，摁住 command 键 去单击该图层
			4 command + shift + C 复制图标
			5 command + N 新建一个png 图
			6 command + v 将图标粘贴进去
			7 command + s  保存图片 注意 将下方格式改为PNG格式（每次对图片修改之后，要先保存导出，否则程序引用过程中无效） 
			
		*/

		/*
			PS常用快捷键：
			1 打开图片之后 若出现额外内容 command+ H
			2 command + R 显示标尺 将鼠标放在标尺上 右击即可修改单位为像素
			3 command + S 保存
			4 command + N 新建
			5 command + shift + C 复制
			6 command + v 粘贴 

		*/
		/*
			如果快捷键不能用 或者与其他软件产生冲突时
			常用查找:
			菜单栏视图:标尺，额外内容....;
			图像：修改图像大小；
			窗口：f8 可显示信息窗口； 

		*/
		

		.a {
			/*所引用图标的大小*/
			width: 40px;
			height: 38px;
			/*引用图标所在图片的路径*/
			background-image: url("b.png");
			/*禁止图标在屏幕中间平铺*/
			background-repeat: no-repeat;
			/*确定图标在png图上的位置 距左 距上  取值均为负值*/
			background-position: 0 -240px;

		}
		.b {
			width: 25px;
			height: 25px;
			background-image: url("b.png");
			background-repeat: no-repeat;
			background-position: -97px -289px;
		}
		.c {
			width: 500px;
			height: 70px;
			background: skyblue;
			/*居中显示*/
			margin: 0 auto;
			/*父级为相对定位 （即参照物）*/
			position: relative;
		}
		.c>span {
			/*top left 的取值 为子元素 相对于父级元素 的位置*/
			top: 6px;
			left: 20px;
			width: 50px;
			height: 50px;
			background-image: url("zhu.png");
			background-repeat: no-repeat;
			background-position: -8px -8px;
			/*绝对定位*/
			position: absolute;
		}

		.d {
			width: 50px;
			height: 50px;
			background-image: url("zhu.png");
			background-repeat: no-repeat;
			background-position: -8px -8px;
		}

	</style>
</head>
<body>
	<div class="a"></div>
	<div class="b"></div>
	<div class="c">
		<span></span>
	</div>
	<div class="d"></div>
</body>
</html>